<template>
  <div class="score_voucher">
    <div class="banner_text">
      <img src="../../../assets/img/modules/score/qy_8.png" alt=""> 职工教育网工会会员身份核验
    </div>
    <div class="title_text_span">
      <p>方法一：上传工会会员证</p>
      您可以上传《工会会员证》，上传后能加快核验速度
    </div>
    <div class="h4_text">工会会员证 </div>
    <div class="img_uploader">
      <div class="img_list">
        <van-uploader :after-read="afterRead1">
          <img src="../../../assets/img/modules/score/qy_14.png" alt="" ref="fileImg1">
        </van-uploader>
        <img src="../../../assets/img/modules/score/qy_15.png" alt="">
      </div>
      <p class="img_span">
        清晰看到《工会会员证》的所有信息确认原件色彩扫描或者清晰拍照，不接受复印件。
        <br>上传格式：jpg、png</p>
    </div>
    <div class="title_text_span">
      <p>方法二：工会会员证明 <span>（如无工会会员证明）</span></p>
      为加速工会会员审核进度，您可以下载《工会会员证明》并通过企业工会盖章确认后上传。
      <a href="http://m.oucgz.cn/memberWord.docx" download="">下载工会会员证明</a>
    </div>
    <div class="h4_text">工会会员凭证 </div>
    <div class="img_uploader" style="padding-bottom: 100px">
      <div class="img_list">
        <van-uploader :after-read="afterRead2">
          <img src="../../../assets/img/modules/score/qy_14.png" alt="" ref="fileImg2">
        </van-uploader>
        <img src="../../../assets/img/modules/score/qy_16.png" alt="">
      </div>
      <p class="img_span">
        清晰看到《工会会员证明》的所有信息确认原件色彩扫描或者清晰拍照，不接受复印件。
        <br>上传格式：jpg、png</p>
    </div>
    <div class="footer_btn">
      <button :class="activeBtn?'wk_bg':'wk_bg active'" :disabled="activeBtn">
        <a v-if="activeBtn" href="javascript:;" @click="setData">确定</a>
        <a v-else href="javascript:;">确定</a>
      </button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'score_voucher',
  components: {},
  data () {
    return {
      activeBtn: false,
      fileImg1: '',
      fileImg2: ''
    }
  },
  props: {},
  watch: {
    fileImg1: {
      handler () {
        if (this.fileImg1 !== '') {
          this.activeBtn = true
        } else {
          this.activeBtn = false
        }
      }
    },
    fileImg2: {
      handler () {
        if (this.fileImg2 !== '') {
          this.activeBtn = true
        } else {
          this.activeBtn = false
        }
      }
    }
  },
  methods: {
    afterRead1 (file) {
      let fd = new FormData()
      fd.append('Filedata', file.file)
      this.$http({
        url: `${window.SITE_CONFIG['wxEditURL']}/eeapi.php?c=allowance&m=uploadFile`,
        method: 'post',
        data: fd,
        withCredentials: false,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(({ data: res }) => {
        if (res.status !== 200) {
          this.$toast(res.msg)
          return false
        }
        this.fileImg1 = res.data.url
        this.$refs.fileImg1.src = res.data.url
      }).catch(() => {})
    },
    afterRead2 (file) {
      let fd = new FormData()
      fd.append('Filedata', file.file)
      this.$http({
        url: `${window.SITE_CONFIG['wxEditURL']}/eeapi.php?c=allowance&m=uploadFile`,
        method: 'post',
        data: fd,
        withCredentials: false,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(({ data: res }) => {
        if (res.status !== 200) {
          this.$toast(res.msg)
          return false
        }
        this.fileImg2 = res.data.url
        this.$refs.fileImg2.src = res.data.url
      }).catch(() => {})
    },
    setData () {
      // 判断是提交还是修改
      if (this.$store.state.score.memberData.id === '') {
        this.submitData()
      } else {
        this.modifyData()
      }
    },
    /* wf_Huang 2019/8/22 0022 新增会员 */
    submitData () {
      this.$http({
        url: `${window.SITE_CONFIG['unionURL']}/api/member/apply`,
        method: 'post',
        data: {
          name: this.$store.state.score.memberData.name,
          phone: this.$store.state.score.memberData.phone,
          platform: 'guokai',
          company_name: this.$store.state.score.memberData.company_name,
          image: this.fileImg1, // this.fileImg1
          proof_image: this.fileImg2, // this.fileImg2
          region_id: this.$store.state.score.memberData.region_id
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.$toast(res.msg)
          return false
        }
        this.$toast('检验申请已提交')
        this.$store.state.score.memberData.id = res.data.apply_id
        localStorage.setItem('stateData', JSON.stringify(this.$store.state))
      }).catch(() => {})
    },
    /* wf_Huang 2019/8/22 0022 修改会员 */
    modifyData () {
      this.$http({
        url: `${window.SITE_CONFIG['unionURL']}/api/member/modifyApply`,
        method: 'post',
        data: {
          id: this.$store.state.score.memberData.id,
          name: this.$store.state.score.memberData.name,
          phone: this.$store.state.score.memberData.phone,
          platform: 'guokai',
          company_name: this.$store.state.score.memberData.company_name,
          image: this.fileImg1, // this.fileImg1
          proof_image: this.fileImg2, // this.fileImg2
          region_id: this.$store.state.score.memberData.region_id
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.$toast('修改失败~')
          return false
        }
        this.$toast('信息修改成功，请等待审核')
        var _this = this
        setTimeout(function () {
          _this.$router.go(-2)
        }, 1000)
      }).catch(() => {})
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
    if (this.$store.state.score.memberData.image !== '') {
      this.$refs.fileImg1.src = this.$store.state.score.memberData.image
      this.fileImg1 = this.$store.state.score.memberData.image
    }
    if (this.$store.state.score.memberData.proof_image !== '') {
      this.$refs.fileImg2.src = this.$store.state.score.memberData.proof_image
      this.fileImg2 = this.$store.state.score.memberData.proof_image
    }
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .score_voucher {
    .banner_text{
      height: 110px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      align-items: center;
      background: #FEEFF0;
      font-size: 30px;
      color: #FF0000;
      img{
        width: 38px;
        height: 38px;
        margin-right: 10px;
      }
    }
    .title_text_span{
      padding: 40px;
      font-size: 26px;
      line-height: 35px;
      color: #c8c9cc;
      margin-bottom: 40px;
      background-image: linear-gradient(-270deg, #FBFBFB 0%, #F6F6F6 100%);
      p{
        font-size: 28px;
        color: #222222;
        margin: 15px 0;
        span{
          font-size: 28px;
          color: #027FFE;
        }
      }
      a{
        background: #FFFFFF;
        border: 1px solid #027FFE;
        border-radius: 43px;
        font-size: 32px;
        color: #027FFE;
        line-height: 86px;
        width: 100%;
        display: block;
        text-align: center;
        margin-top: 30px;
      }
    }
    .h4_text{
      padding: 0 40px;
      font-size: 32px;
      color: #222222;
    }
    .img_uploader{
      padding: 32px;
      .img_list{
        display: flex;
        justify-content: space-between;
        img{
          width: 330px;
          height: 232px;
          border-radius: 10px;
        }
      }
      .img_span{
        font-size: 24px;
        color: #999999;
        line-height: 35px;
      }
    }
    .footer_btn{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 110px;
      background-color: #ffffff;
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
      padding: 12px 45px;
      .wk_bg{
        background: #FA3A51;
        border-radius: 4px;
        height: 86px;
        width: 100%;
        display: flex;
        justify-items: center;
        justify-content: center;
        align-content: center;
        align-items: center;
        border: 0;
        a{
          font-size: 32px;
          color: #FFFFFF;
          letter-spacing: 0;
          width: 100%;
          line-height: 40px;
          text-align: center;
          &:nth-child(2){
            border-left: 1px solid #ffffff;
          }
        }
      }
      .active{
        background: #FFBFC7;
      }
    }
  }
</style>
